<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>发起流程</span>
      </div>
      <el-col :span="18" :offset="3">
        <div class="form-conf">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="知识库" prop="knowledgeBaseId">
              <el-select
                v-model="ruleForm.knowledgeBaseId"
                placeholder="请选择知识库"
                @change="initData"
              >
                <el-option
                  v-for="item in KnowledgeList"
                  :key="item.knowledgeBaseId"
                  :label="item.knowledgeBaseName"
                  :value="item.knowledgeBaseId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <parser
            v-if="formOpen"
            :key="new Date().getTime()"
            :form-conf="formData"
            @submit="submit"
            ref="parser"
            @getData="getData"
          />
        </div>
      </el-col>
    </el-card>
  </div>
</template>

<script>
import { getProcessForm, startProcess } from "@/api/workflow/process";
import Parser from "@/utils/generator/parser";
//知识库
import {
  getKnowledgeRelationList_Api, //知识库关联列表查询
  addKnowledge_Api, //新的启动流程
  getKnowledgeForm_Api, //查询表单
} from "@/api/centralized/serviceCounter";

export default {
  name: "WorkStart",
  components: {
    Parser,
  },
  data() {
    return {
      definitionId: null,
      deployId: null,
      procInsId: null,
      formOpen: false,
      formData: {},
      KnowledgeList: [], //知识库关联列表
      //选择知识库表单
      ruleForm: {
        knowledgeBaseId: "",
      },
      rules: {
        knowledgeBaseId: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
      },
    };
  },
  created() {
    // this.initData();
    this.getlist();
  },
  methods: {
    //获取知识库关联列表
    getlist() {
      getKnowledgeRelationList_Api().then((res) => {
        this.KnowledgeList = res.data;
      });
    },
    //获取表单
    initData() {
      // this.deployId = this.$route.params && this.$route.params.deployId;
      // this.definitionId = this.$route.query && this.$route.query.definitionId;
      // this.procInsId = this.$route.query && this.$route.query.procInsId;
      getKnowledgeForm_Api({
        knowledgeBaseId: this.ruleForm.knowledgeBaseId,
      }).then((res) => {
        if (res.data) {
          this.formData = res.data;
          this.formOpen = true;
        }
      });
    },
    /** 接收子组件传的值 */
    getData(data) {
      if (data) {
        const variables = [];
        data.fields.forEach((item) => {
          let variableData = {};
          variableData.label = item.__config__.label;
          // 表单值为多个选项时
          if (item.__config__.defaultValue instanceof Array) {
            const array = [];
            item.__config__.defaultValue.forEach((val) => {
              array.push(val);
            });
            variableData.val = array;
          } else {
            variableData.val = item.__config__.defaultValue;
          }
          variables.push(variableData);
        });
        this.variables = variables;
      }
    },
    submit(data) {
      console.log(123);
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (data) {
            const tempObj = { ...this.$route.query };
            tempObj.knowledgeBaseId = this.ruleForm.knowledgeBaseId;
            tempObj.variables = { ...data.valData };
            addKnowledge_Api(tempObj).then((res) => {
              this.$modal.msgSuccess(res.msg);
              this.$tab.closeOpenPage({
                path: "/centralized/claim",
              });
            });

            // 启动流程并将表单数据加入流程变量
            // startProcess(this.definitionId, JSON.stringify(data.valData)).then(
            //   (res) => {
            //     this.$modal.msgSuccess(res.msg);
            //     this.$tab.closeOpenPage({
            //       path: "/centralized/own",
            //     });
            //   }
            // );
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.form-conf {
  margin: 15px auto;
  width: 80%;
  padding: 15px;
}
</style>
